<template>
	<view>
		<uni-popup ref="popup" type="bottom">
			<view class="simple-card round-top-corner">
				<view class="popup-header uni-flex align-center">
					<image class="r-mg" :src="$getCloudStorageUrl('/logo.jpg')"></image>
					<text class="uni-bold">第三空间商家助手</text>
				</view>
				<view class="uni-bold t-mg b-mg">请接受如下订阅消息，以免错过重要消息</view>
				<view class="b-mg">
					<u-cell-group>
						<u-cell-item v-for="item in templates" :key="item.templateId" :title="item.templateName" :arrow="false"
						 hoverClass="none" icon=""></u-cell-item>
					</u-cell-group>
				</view>
				<u-button shape="circle" @click="handleConfirm" type="success">接受</u-button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		props: {
			templates: {
				type: Array,
				default: () => {
					return [];
				}
			}
		},
		methods: {
			async handleConfirm() {
				try {
					this.$refs.popup.close();
					let res = await this.requestSubscribeMsg();
					this.$log("用户接受订阅情况", res);
				} catch (e) {
					this.$log("申请订阅消息权限遇到错误", e);
				}
			},
			async request(showCustomPopup) {
				try {
					var res = await this.getSettings();
					this.$log("小程序设置情况", res);
					var needOpenSettings = false;
					var needOpenPopup = false;
					if (res.subscriptionsSetting) {
						if (!res.subscriptionsSetting.mainSwitch) {
							needOpenSettings = true;
						} else if (res.subscriptionsSetting.itemSettings) {
							for (var i = 0; i < this.templates.length; i++) {
								let t = this.templates[i];
								let setting = res.subscriptionsSetting.itemSettings[t.templateId];
								if (!setting) {
									needOpenPopup = true;
									break;
								} else if (setting !== "accept") {
									needOpenSettings = true;
									break;
								}
							}
						} else {
							needOpenPopup = true;
						}
					} else {
						needOpenPopup = true;
					}
					if (showCustomPopup !== undefined) {
						needOpenPopup = needOpenPopup && showCustomPopup;
					}
					if (needOpenSettings) {
						let openSetting = await this.requestOpenSetting();
						if (openSetting) {
							await this.request();
						}
					} else if (needOpenPopup) {
						this.$refs.popup.open();
					} else {
						await this.requestSubscribeMsg();
					}
				} catch (e) {
					this.$log("error", e);
				}
			},
			requestOpenSetting() {
				return new Promise((resolve, reject) => {
					uni.showModal({
						title: "接收订阅消息已关闭，您将收不到重要订阅消息",
						cancelText: "取消",
						confirmText: "去打开",
						success: (res) => {
							if (res.confirm) {
								uni.openSetting({
									success: (res) => {
										resolve(true);
									},
									fail: (err) => {
										resolve(false);
									}
								})
							} else {
								resolve(false);
							}
						},
						fail: (err) => {
							reject(false);
						}
					})
				});
			},
			getSettings() {
				return new Promise((resolve, reject) => {
					uni.getSetting({
						withSubscriptions: true,
						success: (res) => {
							resolve(res);
						},
						fail: (err) => {
							reject(err);
						}
					})
				});
			},
			requestSubscribeMsg() {
				return new Promise((resolve, reject) => {
					let tmplIds = this.templates.map(item => {
						return item.templateId;
					});
					uni.requestSubscribeMessage({
						tmplIds: tmplIds,
						success: (res) => {
							this.$log("接受订阅情况", res);
							resolve(res);
						},
						fail: (err) => {
							reject(err);
						}
					})
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popup-header {
		image {
			width: 48rpx;
			height: 48rpx;
			border-radius: 48rpx;
		}
	}
</style>
